<template>
	<!--数据统计-pop、道具列表-->
	<view class="page-content" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 导航栏 agents导航栏标题 -->
			<nav-tab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab' :show="true" fontS="36" afontS="36" fontW="600"></nav-tab>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper class="page-body" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(item,index) in objlist" :key="index">
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation
					:scroll-into-view="toView">
					<template v-if="item.length>0">
						<view class="body-box" v-for="(ite,ind) in item" :key="ind">
							<view class="box-li">
								<pic-li :obj="ite" :objstatu="user_statu" @toDet="toDet"></pic-li>
							</view>
						</view>
					</template>
					<!--无数据-->
					<empty v-else no-full type="noData"></empty>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import { statisticalOrders,getPopPrices } from '@/common/api.js';
	const util = require('../../common/util2.js');
	import refresh from '@/components/w-refresh/refresh.vue';
	import navTab from '@/components/w-navTab/navTab.vue';
	import picLi from '@/pages/components/pic_book_li2.vue';
	export default {
		components: {
			refresh,
			navTab,
			picLi
		},
		data() {
			return {
				noData: false,
				currentPage: 'index',
				toView: '', //回到顶部id
				tabTitle: ['POP', '道具'], //导航栏格式 --导航栏组件
				currentTab: 0, //sweiper所在页
				pages: [1, 1, 1, 1], //第几个swiper的第几页
				objlist: [[],[]], //数据格式

				page_type: '',
				userType: '', //system-首页 user-用户
				pageStatu: '0', //1-开权限 2-没有权限
				id: '',
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				},
				params1:{
					type:1,
					page:1,
					limit:10,
					company_id:0
				},
				params2:{
					type:2,
					page:1,
					limit:10,
					company_id:0
				},
				is_prop_power:false
			};
		},
		onLoad(option) {
			console.log(222, option)
			this.params1.company_id = this.companyInfo.id;
			this.params2.company_id = this.companyInfo.id;
			if (option.type === '1') {
				this.page_type = '1';
				// 导航栏标题
				this.page_title = 'POP画册';
				if (option.pageStatu === '1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				if (option.userType) {
					this.userType = option.userType
				}

			} else if (option.type === '2') {
				this.page_type = '2';
				if (option.pageStatu === '1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				// 导航栏标题
				this.page_title = 'POP下单';
				if (option.userType) {
					this.userType = option.userType;
					// 导航栏标题
					this.page_title = 'POP下单管理';
				}
			} else if (option.type === '3') {
				this.page_type = '3';
				if (option.pageStatu === '1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				// 导航栏标题
				this.page_title = '道具下单';
				if (option.userType) {
					this.userType = option.userType
					// 导航栏标题
					this.page_title = '道具下单管理';
				}
			}
		},
		computed: {
			...mapGetters(['companyInfo','userRole']),
		},
		onShow() {
			if(!!this.userRole){
				if(this.userRole.countStatu1 && !this.userRole.countStatu2){ //权限只有pop
					this.tabTitle = ['POP'];
					this.is_prop_power = false;
				}else if(!this.userRole.countStatu1 && this.userRole.countStatu2){ //权限只有道具
					this.tabTitle = ['道具'];
					this.is_prop_power = true;
				}else if(this.userRole.countStatu1 && this.userRole.countStatu2){ //权限有pop\道具
					this.tabTitle = ['POP', '道具'];
					this.is_prop_power = false;
				}
			}
			this.params1.page = 1;
			this.params2.page = 1;
			this.getdata();
		},
		methods: {
			//跳转详细页
			toDet(id,title,type) {
				/* if(this.currentTab === 0){
					uni.navigateTo({
						url: `/pages/picBook/statisticsSearch?id=${id}&pageType=pop`
					})
				}else if(this.currentTab === 1){
					uni.navigateTo({
						url: `/pages/picBook/statisticsDetail?id=${id}&pageType=prop`
					})
				} */
				let type1 = ''
				if(type === 1){
					type1 = 'pop';
				}else if(type === 2){
					type1 = 'prop';
				}
				uni.navigateTo({
					url: `/pages/picBook/statisticsSearch?id=${id}&pageType=${type1}`
				})
			},
			toTop() {
				this.toView = ''
				setTimeout(() => {
					this.toView = 'top' + this.currentTab
				}, 10)
			},
			//获取数据
			getdata(){
				if(!this.is_prop_power){
					if(this.currentTab === 0){
						statisticalOrders(this.params1).then(res =>{
							if(res.code === 2000){
								this.objlist[this.currentTab] = res.data.data
								this.$forceUpdate() //二维数组，开启强制渲染
							}
						})
					}else if(this.currentTab === 1){
						statisticalOrders(this.params2).then(res =>{
							if(res.code === 2000){
								this.objlist[this.currentTab] = res.data.data
								this.$forceUpdate() //二维数组，开启强制渲染
							}
						})
					}
				}else{
					if(this.currentTab === 0){
						statisticalOrders(this.params2).then(res =>{
							if(res.code === 2000){
								this.objlist[this.currentTab] = res.data.data
								this.$forceUpdate() //二维数组，开启强制渲染
							}
						})
					}
				}
			},
			changeTab(index) {
				this.currentTab = index;
				
			},
			// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
			isRequest() {
				return new Promise((resolve, reject) => {
					this.pages[this.currentTab]++
					var _self = this;
					if(!this.is_prop_power){
						if(this.currentTab === 0){
							this.params1.page ++
						}else if(this.currentTab === 1){
							this.params2.page ++
						}
					}else{
						if(this.currentTab === 0){
							this.params2.page ++
						}
					}
					setTimeout(() => {
						uni.hideLoading()
						// uni.showToast({
						// 	icon: 'none',
						// 	title: `请求第${that.currentTab + 1 }个导航栏的第${that.pages[that.currentTab]}页数据成功`
						// })
						let newData = [];
						if(!this.is_prop_power){
							if(this.currentTab === 0){
								statisticalOrders(this.params1).then(res =>{
									if(res.code === 2000){
										newData = res.data.data;
										resolve(newData)
									}
								})
							}else if(this.currentTab === 1){
								statisticalOrders(this.params2).then(res =>{
									if(res.code === 2000){
										newData = res.data.data;
										resolve(newData)
									}
								})
							}
						}else{
							if(this.currentTab === 0){
								statisticalOrders(this.params2).then(res =>{
									if(res.code === 2000){
										newData = res.data.data;
										resolve(newData)
									}
								})
							}
						}
					}, 1000)
				})
			},
			// swiper 滑动
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
				if(this.currentTab === 0){
					this.getdata();
				}else if(this.currentTab === 1){
					this.getdata();
				}
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {
				console.log(`加载${this.currentTab}`) //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.isRequest().then((res) => {
					let tempList = this.objlist
					tempList[this.currentTab] = tempList[this.currentTab].concat(res)
					this.objlist = tempList
					this.$forceUpdate() //二维数组，开启强制渲染
					console.log(tempList)
				})
			}, 300),
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			isRefresh() {
				setTimeout(() => {
					uni.showToast({
						icon: 'success',
						title: '刷新成功'
					})
					this.$refs.refresh.endAfter() //刷新结束调用
				}, 1000)
			}
		}
	};
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}
	.page-content {
		width: 100vw;
		height: 100%;
		font-size: 28upx;
		display: flex;
		flex-direction: column;
		background: $uni-bg-color-grey;

		.page-body {
			height: calc(100% - 90rpx - var(--status-bar-height));
		}

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 2;
			border-bottom: 1rpx solid #F2F4F5;
		}
	}

	.body-box {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;

		.box-li {
			padding: 30rpx 30rpx 20rpx 30rpx;
			background: $uni-bg-color;
			margin-bottom: 30rpx;
		}

		.box-li:last-of-type {
			border-bottom: none;
			margin-bottom: 0rpx;
		}
	}
</style>
